<template>
  <div class="truk_luxian">
     <header>
       <p><img src="../assets/img/left@2x.png" ></p>
       <p>路线</p>
       <p></p>
     </header>
      <div class="contener">
        <div class="pointers">
          <p>请添加你的车辆信息，查询更方便</p>
        </div>
        <div class="forms">
          <form>
            <div class="check_list">
              <p>车辆类型</p>
              <p><img src="../assets/img/checked.png" ><span>货车</span></p>
              <p><img src="../assets/img/unchecked.png"><span>小客车</span></p>
            </div>
            <div class="check_cnt">
              <ul>
                <li>
                  <div class="lefter">
                    车货总重
                  </div>
                  <div class="righter">
                    <p><input type="text" name="" placeholder="请输入车货总数"></p>
                    <span></span>
                  </div>
                </li>
                <li>
                  <div class="lefter">
                    车辆轴数
                  </div>
                  <div class="righter">
                    <p><input type="text" name="" placeholder="请输入车辆轴数"></p>
                    <span>吨</span>
                  </div>
                </li>
                <li>
                  <div class="lefter">
                    当前油价
                  </div>
                  <div class="righter">
                    <p><input type="text" name="" placeholder="5.6"></p>
                    <span>元/升</span>
                  </div>
                </li>
                <li>
                  <div class="lefter">
                    车辆油耗
                  </div>
                  <div class="righter">
                    <p><input type="text" name="" placeholder="请输入车辆轴数"></p>
                    <span>升/百公里</span>
                  </div>
                </li>
              </ul>
            </div>
            <div class="btn">
              <input type="button" name="" value="下一步">
            </div>
          </form>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'usual_dress',
  data () {
    return {
      msg: 'Welcome to mine.vue'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='less'>
@import '.././assets/less/style.less';
.truk_luxian{
  header {
    .px2rem(height,88);
      background: #21d094;
      display: flex;
      align-items: center;
      justify-content: space-between;
      /* .border(1,solid,#000); */
      p:nth-child(1) {
        flex: 1;
        .font(30,#fff);
        .padding-left(35);
        img {
          .px2rem(height,39);
          .px2rem(width,39);
        }
      }
      p:nth-child(2) {
        flex: 2;
        text-align: center;
        .font(30,#fff);
      }
      p:nth-child(3) {
        flex: 1;
        .font(30,#fff);
      }
  }
  .contener {
    .pointers {
      p {
        .line-height(64);
        text-align: center;
        .font(32,#fa9a04);
        background: #e6e5e5;
      }
    }
    .forms {
      width: 90%;
      margin: auto;
     .margin-top(40);
      .check_list {
        display: flex;
        .px2rem(height,78);
        align-items: center;
        background: #f0f0f0;
        p {
          flex: 1;
          display: flex;
          height: 100%;
          align-items: center;
          /* .border(1,solid,#ccc); */
          &:nth-child(1){
            .padding-left(30);
          }
          &:nth-child(2){
            .padding-left(10);
            span {
              .padding-left(20);
            }
          }
          &:nth-child(3){
            .padding-left(10);
            span {
              .padding-left(20);
            }
          }
          img {
            display: block;
            .px2rem(height,24);
            .px2rem(width,22);
          }
        }
      }
      .check_cnt {
        ul {
          .margin-top(20);
          li {
            .margin-bottom(20);
            display: flex;
            .px2rem(height,60);
            .line-height(60);
            /* .border(1,solid,#ccc); */
            .lefter {
              flex: 1;
              text-align: center;
            }
            .righter {
              flex: 4;
              /* width: 100%; */
              display: flex;
              justify-content: space-between;
              align-items: center;
              
              p {
                background: #f0f0f0;
                /* width: 100%; */
                height: 100%;
                display: flex;
                align-items: center;
                input {
                  background: #f0f0f0;
                  border: none;
                  .padding-left(40);
                }
                span {
                  
                }
              }
              span {

              }
            }
          }
        }
      }
      .btn {
        .margin-top(64);
        input {
          .px2rem(height,78);
          width: 100%;
          border: none;
          .font(30,#fff);
        }
      }
    }
  }
}
</style>
